<template>
    <div class="group-manage">
        <el-card class="box-card">
          <div slot="header">
            <div class="title-box" style="padding-top: 10px; padding-bottom: 13px;">
              <span>个人群组</span>
            </div>
          </div>
          <el-form v-if="showTopSetting" :rules="rule" ref="form" :model="form" label-width="80px">
              <el-form-item label="名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="initTop">确认</el-button>
                <el-button>取消</el-button>
              </el-form-item>
          </el-form>
          <el-tree
            v-else
            :props="defaultProps"
            :load="loadNode"
            @node-click="getNodeInfo"
            lazy>
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.data.name }}</span>
                <span>
                <el-button
                    type="text"
                    size="mini"
                    @click="handleAdd(data)"
                    icon="el-icon-plus">
                </el-button>
                <el-button
                    class="update-btn"
                    type="text"
                    size="mini"
                    @click="handleUpdate(data)"
                    icon="el-icon-edit">
                </el-button>
                <el-button
                    class="delete-btn"
                    type="text"
                    size="mini"
                    @click="handleDelete(data,node)"
                    icon="el-icon-delete">
                </el-button>
                </span>
            </span>
          </el-tree>
        <!--弹窗：新增/编辑群组-->
            <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="30%" >
            <el-form :rules="rules" ref="dataForm" :model="temp" label-position="top">
                <el-form-item label="个人群组名称" prop="pname">
                    <el-input v-model="temp.name" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="上级名称" prop="pval">
                    <el-input v-model="temp.parentId" placeholder="" disabled></el-input>
                </el-form-item>
                <el-form-item label="同级排名" prop="parent">
                    <el-input v-model="temp.orderNum"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button v-if="dialogStatus=='addButton'" type="primary" @click="addButton">确定</el-button>
                <el-button v-if="dialogStatus=='updateButton'" type="primary" @click="updateButton">确定</el-button>
            </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import deptApi from '@/api/dept'
import groupApi from '@/api/group'
import {parseTime, resetTemp} from '@/utils'
export default {
    data () {
        return {
            groupTree: [],//个人群组树
            defaultProps: {
                children: 'children',
                label: function(data,node){
                    return data.name;
                }
            },
            textMap: {
                addButton: '添加群组',
                updateButton: '个人群组修改',
            },
            temp: {
                name: null,
                orderNum: null,
                parentId: null,
                personGpId: null,
            },
            dialogStatus:'',
            dialogFormVisible:false,
            rules: {
            },
            rule: {

            },
            showTopSetting: false,//顶层初始化
            form:{
                name: ''
            },
            selNode:null,
        }
    },
    created() {
    },
    methods: {
        //加载叶子节点
      loadNode(node,resolve) {
          let params = {
                parentId: node.level==0?0:node.data.personGpId
            }
            groupApi.queryPersonGroup(params).then(res => {
                if(res.data.data.length || node.level){
                    resolve(res.data.data)
                }else{
                    this.showTopSetting = true
                }
            }).catch(res => {
                resolve([]);
            })
          // 这里resolve的数据是后台给的,id用于之后点击发起请求时的参数
      },
      //添加个人群组
      handleAdd(data) {
        this.dialogStatus = 'addButton';
        resetTemp(this.temp)
        this.temp.parentId = data.parentId;//上级名称
        this.temp.personGpId = data.personGpId;
        this.dialogFormVisible = true
        this.$nextTick(() => this.$refs['dataForm'].clearValidate())
      },
      //添加事件
      addButton() {
        this.$refs['dataForm'].validate((valid) => {
          if (!valid) return;
          const data = Object.assign({}, this.temp)//copy obj
          //树新增操作接口
          groupApi.addPersonGroup(data).then(() => {
            this.dialogFormVisible = false
            this.selNode.loaded = false;
            this.selNode.expand(); 
            this.$message.success("添加个人群组成功")
          })
        })
      },
      /**
       * 更新群组树
       */
      handleUpdate(data) {
        this.dialogStatus = 'updateButton';
        this.temp = Object.assign({}, data) // copy obj
        this.dialogFormVisible = true
        this.$nextTick(() => this.$refs['dataForm'].clearValidate())
      },
      updateButton() {
        this.$refs['dataForm'].validate((valid) => {
          if (!valid) return;
          const data = Object.assign({}, this.temp)//copy obj
          groupApi.updatePersonGroup(data).then(res => {
            this.dialogFormVisible = false
            this.selNode.loaded = false;
            this.selNode.expand(); 
            this.$message.success("更新群组成功")
          })
        })
      },

      /**
       * 删除群组
       */
      handleDelete(data,node) {
        this.$confirm('您确定要删除该群组？', '提示', confirm).then(() => {
          groupApi.deletePersonGroup({personGpId: data.personGpId}).then(() => {
            node.parent.loaded = false;
            node.parent.expand(); 
            this.$message.success("删除群组成功")
          })
        })
      },
      getNodeInfo(data,node){
        this.selNode = node;
      },
      //提交初始化顶层
      initTop(){
          let params = {

          }
          /*
          userApi.addAdmin(this.temp).then((res) => {
                        this.showTopSetting = false
                        this.$message.success("添加成功")
            })*/
      }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .text {
    font-size: 18px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 40%;
    margin: 0 auto;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    padding-right: 8px;
  }

  .card-title {
    line-height: 50px;
    height: 50px;
  }

  .tips-text {
    font-size: 18px;
    color: #909399;
  }

  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 22px;
    }
  }

  .el-tree-node__content {
      height: 2.5rem ;
      line-height: 2.5rem;
    }
  .el-tree-node__label {
      font-size: 1.125rem;
    }
  .update-btn {
    margin-left: 20px;
  }

  .delete-btn {
    margin-left: 20px;
    color: #F56C6C;
  }

  .mgl-10 {
    margin-left: 10px;
  }

  .mgb-15 {
    margin-bottom: 15px;
  }


</style>
